<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<body>
    <div id="app">
        <div v-show="infos" class="loading">
            <div>{{info}}</div>
        </div>
        <div class="content" id="appp">
            <!-- <div class="title">采购意向</div>
                    <div class="line"></div>-->
            <div class="picture">
                <img :src="img" alt>
            </div>
            <div class="productName">
                <span style="color:red;">*</span>
                <span>【采购设备名称】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <input type="text" placeholder="请输入设备名称" v-model="proname" readonly="readonly">
                <!-- <div class="input">{{proname}}</div> -->
            </div>
            <div class="productName">
                <span style="color:red;">*</span>
                <span>【采购设备型号】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <input type="text" placeholder="请输入设备型号" v-model="promodel" readonly="readonly">
                <!-- <div class="input">{{promodel}}</div> -->
            </div>
            <div class="productName">
                <span style="color:red;">*</span>
                <span>【联系人】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <input type="text" placeholder="请输入您的姓名" v-model="contacts">
            </div>
            <div class="productName">
                <span style="color:red;">*</span>
                <span>【联系方式】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <input type="number" placeholder="请输入您的手机号" v-model="phone">
            </div>
            <div class="productName">
                <span style="color:red;">*</span>
                <span>【公司】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <input type="text" placeholder="请输入公司" v-model="company">
            </div>
            <div class="productName">
                <span style="color:#fff;">*</span>
                <span>【留言】</span>
            </div>
            <div class="inputBox">
                <span style="color:#fff;">*1</span>
                <textarea placeholder="请输入留言" v-model="message" maxlength="100"></textarea>
                <div class="num">{{message.length}}/100</div>
            </div>
            <div class="btn" @click="submit">提交</div>
        </div>
    </div>
</body>
<!-- import { Toast } from "mint-ui"; -->
<script>
    var app = new Vue({

        el: '#app',
        data: {
            infos: false,
            info: '',
            img: "",
            proname: "2",
            promodel: "1",
            contacts: "",
            phone: "",
            company: "",
            message: ""
        },
        created() {
            this.proname = this.$route.query.name;
            this.promodel = this.$route.query.model;
            var a = this.promodel;
            // var a = "B720";
            this.img = require("../assets/" + a + ".png");
        },
        mounted() {
            console.log($(".appp"));
            var hrt = document.documentElement.clientHeight;
            document.getElementById("appp").style.height = hrt + "px";
            var h1 = $("body").height();
            var h2 = $("#appp").height();
            // var h3 = $('#main').height();
            $(window).resize(function () {
                $("body").height(h1);
                $("#appp").height(h2);
                // $('#main').height(h3);
                // $('#main').css('top', h2);
            });
            window.onload = function () {
                document.addEventListener("gesturestart", function (e) {
                    e.preventDefault();
                });
                document.addEventListener("dblclick", function (e) {
                    e.preventDefault();
                });
                document.addEventListener("touchstart", function (event) {
                    if (event.touches.length > 1) {
                        event.preventDefault();
                    }
                });
                var lastTouchEnd = 0;
                document.addEventListener(
                    "touchend",
                    function (event) {
                        var now = new Date().getTime();
                        if (now - lastTouchEnd <= 300) {
                            event.preventDefault();
                        }
                        lastTouchEnd = now;
                    },
                    false
                );
            };
        },
        methods: {
            submit() {
                var that = this
                if (this.proname == "") {
                    this.info = "请输入设备名称"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }
                if (this.promodel == "") {
                    this.info = "请输入设备型号"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }
                if (this.contacts == "") {
                    this.info = "请输入联系人"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }
                if (this.phone == "") {
                    this.info = "请输入联系方式"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }
                if (!/^1[34578]\d{9}$/.test(this.phone)) {
                    this.info = "手机号格式有误"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }
                if (this.company == "") {
                    this.info = "请输入公司名称"
                    this.infos = true
                    setTimeout(() => {
                        this.info = ""
                        this.infos = false
                    }, 1000)
                    return;
                }

                function callback(a) {
                    alert(a.msg);
                }

                // return
                $.ajax({
                    url: "https://123gps.com.cn/rest/buyingIntentionInfo/addBuyingIntentionInfo",
                    data: {
                        // equipmentNo:'1',
                        equipmentNo: that.promodel,
                        contacts: that.contacts,
                        phone: that.phone,
                        company: that.company,
                        leaveWord: that.message,
                        remark: that.proname,
                        // remark:'2',
                    },
                    async: false,
                    type: "post",
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            // that.open2()
                            that.info = "提交成功"
                            that.infos = true
                            setTimeout(() => {
                                that.info = ""
                                that.infos = false
                            }, 1500)
                        } else {
                            that.info = "提交失败"
                            that.infos = true
                            setTimeout(() => {
                                that.info = ""
                                that.infos = false
                            }, 1500)
                        }
                    },
                    error: function (msg) {
                        console.log(msg);
                        that.info = "提交失败"
                            that.infos = true
                            setTimeout(() => {
                                that.info = ""
                                that.infos = false
                            }, 1500)
                    }
                });
            }
        }
    })
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin: 0;
        padding: 0;
    }

    input textarea {
        outline: none;
        -webkit-appearance: none;
        -webkit-appearance: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    h1,
    h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }

    div {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        height: 100vh;
        /* overflow: hidden; */
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
    }

    .title {
        width: 100%;
        padding: 20px;
        font-size: 28px;
    }

    .picture {
        /* height: 20vh; */
        width: 100%;
        text-align: center;
    }

    .picture>img {
        /* height: 20vh; */
        width: 76%;
        padding: 20px 0;
    }

    .productName {
        box-sizing: border-box;
        /* border:1px solid red; */
        /* height: 4vh;
          line-height: 5vh; */
        width: 90%;
        text-align: left;
        /* margin-top: 1vh; */
    }

    .inputBox {
        box-sizing: border-box;
        /* height: 5vh; */
        /* border:1px solid red; */
        width: 90%;
        text-align: left;
        /* margin-top: 10px; */
        position: relative;
    }

    .inputBoxs {
        display: flex;
        flex-direction: row;
        line-height: 60px;
    }

    .num {
        position: absolute;
        bottom: 20px;
        right: 60px;
    }

    .input {
        width: 90%;
        height: 60px;
        border-bottom: 1px solid #888;
    }

    input {
        width: 90%;
        height: 60px;
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        outline: none;
        border-bottom: 1px solid #888;
    }

    textarea {
        /* margin-top: 1vh; */
        border: 1px solid #888;
    }

    .btn {
        width: 82%;
        background: #0368d0;
        border-radius: 6px;
        color: #fff;
        padding: 10px 0;
        font-size: 15px;
        margin-bottom: 10px;
        margin-left: 17px;
        /* height: 6vh; */
        /* line-height: 6vh; */
    }

    textarea {
        padding: 6px;
        border-radius: 6px;
        width: 86%;
        /* height: 5vh; */
    }

    .loading {
        position: fixed;
        z-index: 9999;
        top: 0;
        width: 100%;
        height: 100vh;
        /* background: #fff; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading>div {
        background: #888;
        color: #fff;
        padding: 10px;
        border-radius: 4px;
    }
</style>

</html>